<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>User Tag List</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <script th:inline="javascript">
    $(document).ready(function() {
      $('form').submit(function(event) {
        event.preventDefault();
        const query = $('#query').val();
        $.get('/userTag/search/' + query, function(data) {
          let tableBody = "<h1>User Tag List</h1>";
          tableBody+="<table><tr> <th>TagName</th> <th>TagValue</th> <th>DistinctId</th> <th>UserId</th><th>Subject</th><th>InsertTime</th> <th>Delete</th><th>Add</th> </tr>";
          for (let i = 0; i < data.length; i++) {
            tableBody += "<tr>";
            tableBody += "<td>" + data[i].tagName + "</td>";
            tableBody += "<td>" + data[i].tagValue + "</td>";
            tableBody += "<td>" + data[i].distinctId + "</td>";
            tableBody += "<td>" + data[i].userId + "</td>";
            tableBody += "<td>" + data[i].subject + "</td>";
            tableBody += "<td>" + data[i].insertTime + "</td>";
            tableBody+="<td><a href=\"/userTag/delete/";
            tableBody+=data[i].distinctId+"\">";
            tableBody+="Delete<\/a></td>";
            tableBody+="<td><a href=\"/userTag/add/";
            tableBody+="\">";
            tableBody+="add<\/a></td>";
            tableBody += "</tr>";
          }
          tableBody+="</table>";
          $('#search-results').html(tableBody);
        });
      });
    });
  </script>
</head>
<body>
<div th:if="${userTags != null and #lists.size(userTags) > 0}">
  <form th:action="@{userTag/search}" method="get">
    <input type="text" name="query" id="query" placeholder="输入搜索关键词">
    <button type="submit">搜索</button>
  </form>
  <div id="search-results">
  <h1>User Tag List</h1>
  <table>
    <tr>
      <th>TagName</th>
      <th>TagValue</th>
      <th>DistinctId</th>
      <th>UserId</th>
      <th>Subject</th>
      <th>InsertTime</th>
      <th>操作</th>
    </tr>
    <tr th:each="userTag : ${userTags}">
      <td th:text="${userTag.tagName}"></td>
      <td th:text="${userTag.tagValue}"></td>
      <td th:text="${userTag.distinctId}"></td>
      <td th:text="${userTag.userId}"></td>
      <td th:text="${userTag.subject}"></td>
      <td th:text="${userTag.insertTime}"></td>
      <td>  <a th:href="@{/userTag/{id}(id=${userTag.distinctId})}">查看</a> </td>


      <a class="tag" href="#" v-for="(tag,index) in tagCloudList">{{tag.name}}</a>






      <td>  <a th:href="@{/userTag/delete/{id}(id=${userTag.distinctId})}">删除</a></td>
      <td>  <a th:href="@{/userTag/add}">增加标签</a></td>
      <td>  <a th:href="@{/userProfile/{userid}(id=${userTag.userId})}">用户画像</a></td>
      </td>
    </tr>
  </table>
  </div>
</div>
<div th:unless="${userTags==null or #lists.size(userTags) > 0}">
  <!-- 如果列表长度等于0，显示一条连接 -->

  <h2>添加User Tag</h2>
  <a th:href="@{/userTag/add}">Add Tag</a>
</div>

</body>
</html>
